<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>登录</title>
    <jsp:include page="/WEB-INF/view/commons/css.jsp" />
    <style>
        .login-layout{
            background: url("static/images/login_bg.jpg") no-repeat center center;
        }
        .login-container{
            margin-top: 200px;
            width: 400px;
            background-color: #eeeeee;
            border-radius: 4px;
            overflow: hidden;
        }
        .login-head{
            height: 60px;
            background-color: #5DB1FB;
            padding-top: 12px;
            padding-bottom: 8px;
        }
        .login-head h1{
            font-size: 24px;
            color: #f3f5f8;
            text-align: center;
            margin: 0;
        }
        .login-head p{
            font-size: 12px;
            color: #000000;
            text-align: center;
            margin: 0;
            transform: scale(0.7);
            word-spacing: 4px;
        }
        .head-name{
            text-align: center;
            font-size: 16px;
            color: #000;
            margin-bottom: 15px;
            margin-top: 0;
        }
        .login-box{
            padding: 20px 30px;
        }
    </style>
</head>
<body class="login-layout">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container" style="margin-top: 150px">
                    <div class="login-head">
                        <h1 id="id-text2">${systemName}</h1>
                    </div>


                    <div id="login-box" class="login-box">

                        <h4 class="head-name">用户登录</h4>

                        <form id="inputForm" action="login/checkUser" method="post">
                            <fieldset>
                                <label class="block clearfix">
                                    <span class="block input-icon input-icon-left">
                                        <input id="account" name="account" type="text" class="form-control" placeholder="请输入登录账号" />
                                        <i class="ace-icon fa fa-user"></i>
                                    </span>
                                </label>

                                <label class="block clearfix">
                                            <span class="block input-icon input-icon-left">
                                                <input id="password" name="password" type="password" class="form-control" placeholder="请输入登录密码" />
                                                <i class="ace-icon fa fa-lock"></i>
                                            </span>
                                </label>

                                <div class="clearfix">
                                    <label class="inline">
                                        <input id="readMe" type="checkbox" class="ace" />
                                        <span class="lbl"> 记住</span>
                                    </label>

                                    <button type="submit" class="pull-right btn btn-sm btn-primary btn-block">
                                        <span class="bigger-110">登录</span>
                                    </button>
                                </div>

                            </fieldset>
                        </form>
                    </div><!-- /.login-box -->
                </div>
                <div style=" margin-top:  20px; text-align:  center;">
                    <img src="static/images/complogo.png" style=" width: 140px; margin-bottom: 15px; "><br/>
                    <img src="static/images/compname.png" style=" width: 265px;" >
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.main-content -->
</div><!-- /.main-container -->


<!-- script start -->
<jsp:include page="/WEB-INF/view/commons/js.jsp" />
<script type="text/javascript" src="static/plugin/js/js.cookie.js"></script>
<script type="text/javascript">
    if (window != top) {
        top.location.href = location.href;
    }
    $(document).ready(function(e) {

        var options = {
            rules:{
                account:{required:true},
                password:{required:true}
            },
            submitHandler:function(form){
                saveReadMe();
                $(form).ajaxSubmit({
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        if(data.success){
                            window.location.href="${ctx}/index/home";
                        }else{
                            layer.alert(data.msg);
                        }
                    }
                });
            }
        };
        $("#inputForm").validate(options);


        var account = $.cookie('account');
        var password = $.cookie('password');
        if (account && password) {
            $("#account").val(account);
            $("#password").val(password);
            $("#readMe").attr("checked", true);
        }

        function saveReadMe(){
            var readMe = $('#readMe')[0].checked;
            var account = readMe ? $('#account').val() : '';
            var password = readMe ? $('#password').val() :'';
            if(account && password){
                $.cookie('account', account,{ expires: 7});
                $.cookie('password', password,{ expires: 7});
            }
        }
    });
</script>
<!-- script end -->
</body>
</html>
